<template>
  <div class="tabs-container">
    <div class="tabs-scroll-wrapper" ref="scrollWrapper">
      <div class="tabs-list" ref="tabsList">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="selectTab(index)"
        >
          <a-badge :count="tab.count" :offset="[12, -5]">{{ tab.type }}</a-badge>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => [],
  },
  modelValue: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['update:modelValue'])

const activeTab = ref(props.modelValue)
const scrollWrapper = ref(null)
const tabsList = ref(null)
const canScrollLeft = ref(false)
const canScrollRight = ref(false)

const selectTab = index => {
  activeTab.value = index
  emit('update:modelValue', index)
  scrollToTab(index)
}

const scrollToTab = index => {
  if (!scrollWrapper.value || !tabsList.value) return

  const wrapperWidth = scrollWrapper.value.offsetWidth
  const listWidth = tabsList.value.scrollWidth
  const tabItems = tabsList.value.children
  let scrollPosition = 0

  // Calculate the position of the selected tab
  for (let i = 0; i < index; i++) {
    scrollPosition += tabItems[i].offsetWidth
  }

  // Center the selected tab if possible
  const tabWidth = tabItems[index].offsetWidth
  const targetScroll = scrollPosition - (wrapperWidth - tabWidth) / 2

  // Smooth scroll to the target position
  scrollWrapper.value.scrollTo({
    left: targetScroll,
    behavior: 'smooth',
  })
}

const checkScroll = () => {
  if (!scrollWrapper.value) return

  const { scrollLeft, scrollWidth, offsetWidth } = scrollWrapper.value
  canScrollLeft.value = scrollLeft > 0
  canScrollRight.value = scrollLeft < scrollWidth - offsetWidth
}

// Handle keyboard navigation
const handleKeyDown = e => {
  if (e.key === 'ArrowLeft') {
    e.preventDefault()
    const newIndex = Math.max(0, activeTab.value - 1)
    selectTab(newIndex)
  } else if (e.key === 'ArrowRight') {
    e.preventDefault()
    const newIndex = Math.min(props.tabs.length - 1, activeTab.value + 1)
    selectTab(newIndex)
  }
}

onMounted(() => {
  try {
    window.addEventListener('resize', checkScroll)
    scrollWrapper.value?.addEventListener('scroll', checkScroll)
    document.addEventListener('keydown', handleKeyDown)
    checkScroll()
    scrollToTab(activeTab.value)
  } catch (e) {}
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkScroll)
  scrollWrapper.value?.removeEventListener('scroll', checkScroll)
  document.removeEventListener('keydown', handleKeyDown)
})

watch(
  () => props.modelValue,
  newVal => {
    activeTab.value = newVal
    scrollToTab(newVal)
  },
)

watch(
  () => props.tabs,
  () => {
    nextTick(() => {
      checkScroll()
      scrollToTab(activeTab.value)
    })
  },
)
</script>

<style scoped>
.tabs-container {
  width: 100%;
}

.tabs-scroll-wrapper {
  position: relative;
  width: 480px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.tabs-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tabs-list {
  display: inline-flex;
  min-width: 100%;
  border-bottom: 1px solid #e0e0e0;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.tab-item:hover {
  color: #333;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1890ff;
}

.tab-content {
  padding: 16px;
}
</style>
